<template>
  <mt-header
    :title="title"
    :style="{ 'border-bottom': showBorder ? '1px solid #ccc' : 'none' }"
  >
    <template slot="left">
      <slot name="left" v-if="showLeft">
        <mt-button
          icon="back"
          style="color:#3A9BDE"
          @click.native="goBack()"
        ></mt-button>
      </slot>
    </template>
    <template slot="right">
      <slot name="right"></slot>
    </template>
  </mt-header>
</template>
<script>
export default {
  name: "appHeader",
  props: {
    showLeft: {
      type: Boolean,
      default: true
    },
    showBorder: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    title() {
      return this.$route.meta.title;
    }
  },
  methods: {
    goBack() {
      if (history.length <= 2) {
        this.$router.push({ path: "/" });
      } else {
        this.$router.back();
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.mint-header {
  height: $header-height;
  font-size: $header-fontSize;
  color: $header-fontColor;
  background-color: $header-bgColor;
}
</style>
